<template>
  <div class="category-grid">
    <van-grid :column-num="5" :border="false">
      <van-grid-item
        v-for="item in grid"
        :key="item.id"
        :icon="item.img"
        :text="item.name"
        @click="goToCategory(item)"
      />
    </van-grid>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 定义 props
const props = defineProps({
  grid: {
    type: Array,
    default: () => []
  }
})

// 跳转到分类页
const goToCategory = (category) => {
  router.push({
    path: '/spu-list',
    query: { category_id: category.id }
  })
}
</script>

<style lang="scss" scoped>
.category-grid {
  background: #fff;
  margin: 10px 0;
  
  :deep(.van-grid-item__content) {
    padding: 10px 8px;
  }
  
  :deep(.van-grid-item__icon) {
    width: 40px;
    height: 40px;
    font-size: 40px;
  }
  
  :deep(.van-grid-item__text) {
    font-size: 12px;
    color: #333;
    margin-top: 5px;
  }
}
</style> 